<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="自从我遇到JS后" name="1" disabled>
                      <div><i class="iconfont icon-bxl-javascript"></i><h2>JS代码写在哪?</h2></div>
                      <blockquote>
                        <h3>回答: 我们在编写js代码时，需要把代码块编写到&lt;script&gt;&lt;/script&gt;中才可以生效</h3>
                      </blockquote>
                      <div><i class="iconfont icon-bxl-javascript"></i><h2>基本数据类型</h2></div>
                        <blockquote>
                          <h3>number：数字类型（1，2，3）</h3>
                          <h3>string：字符串类型（"1","a","hello"）</h3>
                          <h3>boolean：布尔值（true，false）</h3>
                          <h3>undefined：未定义类型</h3>
                          <h3>null：表示空</h3>
                        </blockquote>
                        <el-divider></el-divider>
                      <div><i class="iconfont icon-bxl-javascript"></i><h2>声明变量方式</h2></div>
                        <blockquote>
                            <h3>var、let、const</h3>
                        </blockquote>
                        <blockquote>
                          <h4>var a = 100; <br>var a = 100; // 不会报错</h4>
                        </blockquote>
                        <blockquote>
                          <h4>const a = 100; // 报错 <br>const a = 100; // 变量名唯一，值唯一</h4>
                        </blockquote>
                        <blockquote>
                            <h4>let a = 100; // 报错 <br> let a = 100 // 块级作用域，变量名唯一</h4>
                        </blockquote>
                        <el-divider></el-divider>

                      <div><i class="iconfont icon-bxl-javascript"></i><h2>常用的运算符号</h2></div>
                      <blockquote>
                        <h3>&lt;、&gt;、==、===、!、!=、!==、&&、||</h3>
                      </blockquote>
                        <el-divider></el-divider>

                      <div><i class="iconfont icon-bxl-javascript"></i><h2>测试数据</h2></div>
                      <blockquote>
                        <h3>console.log(1) // 将数据打印到控制台 1</h3>
                      </blockquote>
                      <blockquote>
                        <h3>alert(2) // 弹窗 2</h3>
                      </blockquote>
                      <blockquote>
                        <h3>confirm(1) // 带有确认和取消的弹窗1 确认，取消</h3>
                      </blockquote>
                      <blockquote>
                        <h3>控制台打印数据：doucment.write(1)</h3>
                      </blockquote>
                        <el-divider></el-divider>

                      <div><i class="iconfont icon-bxl-javascript"></i><h2>使用js进行决策</h2></div>
                      <blockquote>
                        <h3>var a = 10</h3>
                        <h3>if(a &lt; 20) {</h3> 
                        <h3>console.log("这里会打印吗?")</h3>
                        <h3>}</h3>
                        <h3>if是关键字，后面是条件和代码块，条件为当a小于20执行console.log中的内容</h3>
                      </blockquote>
                        <el-divider></el-divider>
                      <div><i class="iconfont icon-bxl-javascript"></i><h2>我们好像没提到过函数</h2></div>
                      <blockquote>
                        <h3>function brak(name, age){</h3>
                        &nbsp;&nbsp;&nbsp; // 这里编写内容
                        <br>
                        <h3>}</h3>
                        <h3>函数定义以关键字function打头，接下来指定函数名brak，使用函数时我们提供两个信息：名字和年龄，这些信息被称为形参，container中是函数体，用于编写我们的逻辑代码，这些代码会在我们使用函数时调用</h3>
                        <h3>我们在函数调用是可以传入值比如：</h3>
                        <h3>函数调用： brak("tom",18)，这里我调用brak函数并传入了两个值我们称它为实参</h3>
                        <h3>还可以传入：number、string、boolean等类型的值</h3>
                      </blockquote>
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
       
      </div>
         <div>
              <div class="htmlNav">
                <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="22">
                    <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#ddd">
                        <el-menu-item index="1" @click="basicData">
                        <span slot="title">基本数据类型</span>
                        </el-menu-item>
                        
                        <el-menu-item index="2" @click="variable">
                        <span slot="title">声明变量方式</span>
                        </el-menu-item>
                        
                        <el-menu-item index="3" @click="testData">
                        <span slot="title">测试数据</span>
                        </el-menu-item>

                        <el-menu-item index="4" @click="fun">
                        <span slot="title">函数</span>
                        </el-menu-item>
                        <el-menu-item index="5" @click="symbol">
                        <span slot="title">常用的运算符号</span>
                        </el-menu-item>
                        <el-menu-item index="6" @click="ifs">
                        <span slot="title">使用js进行决策</span>
                        </el-menu-item>
                        <el-menu-item index="7" @click="fun">
                        <span slot="title">我们好像没提到过函数</span>
                        </el-menu-item>
                        <el-menu-item disabled>
                        <span slot="title">持续更新...</span>
                        </el-menu-item>
                        <el-menu-item index="9" @click="top">
                        <span slot="title">返回顶部</span>
                        </el-menu-item>
                    </el-menu>
                    </el-col>
                </el-row>
                </el-aside>
              </div>
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicJS",
    data(){
        return {
            activeName: ["1"],
            moods: "conWrapper",
        }
    },
    methods: {
        basicData(){
            window.scrollTo(100,120);
        },
        variable(){
            window.scrollTo(100,600);
        },
        testData(){
            window.scrollTo(100,900);
        },
        fun(){
            window.scrollTo(100,1350);
        },
        symbol(){
            window.scrollTo(100,1350);
        },
        ifs(){
            window.scrollTo(100,1350);
        },
        top(){
            window.scrollTo(100,0);
        }
        
    }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
</style>